<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no">
<title>添加宠友</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script src="js/common.js"></script>
<link href="css/reset.css" rel="stylesheet">
<link href="css/common.css" rel="stylesheet">
<link rel="stylesheet" href="css/swiper-3.4.0.min.css">
<link href="css/add.css" rel="stylesheet">


</head>
<body >
    <!-- header  start -->
    <div class="top">
        <header>
            <a href="javascript:history.go(-1)"><i class="iconfont back">&#xe608;</i></a>
            <span>添加宠友</span>
        </header>
        <!-- header  end -->

        <!-- search  start -->
        <div class="search">
            <form action=""><a href="search.html">
                <input type="text">
                <div><i class="iconfont">&#xe60a;</i>用户名称/ID号</div>
            </a></form>

            <ul>
                <li class="clearfix">
                    <img src="images/search01.png" alt="">
                    <p>
                        <span>扫一扫</span>
                        <b>扫描宠物的二维码</b>
                    </p>
                    <i>&gt;</i>
                </li>
                <li class="clearfix">
                    <img src="images/search02.png" alt="">
                    <p>
                        <span>附近宠友</span>
                        <b>结交身边宠友</b>
                    </p>
                    <i>&gt;</i>
                </li>
                <li class="clearfix">
                    <img src="images/search03.png" alt="">
                    <p>
                        <span >邀请好友</span>
                        <b>邀请好友加入宠友，一起分享快乐</b>
                    </p>
                    <i>&gt;</i>
                </li>
            </ul>
            <div class="tit" id="tit">可能感兴趣的人</div>
        </div>
    </div>  
    <!-- search  end -->

    <!-- nav  start -->
    <div class="fun">
        <div class="wrap" id="wrap">
            <div class="scroller" id="scroller">

                <ul>
                    <li>
                        <img src="images/fun01.png" alt="">
                        <p>
                            <span>我又不乱来</span>
                            <i></i>
                            <em>河南 郑州</em>
                        </p>
                        <div class="concern">
                            + 关注
                        </div>
                    </li>
                    <li>
                        <img src="images/fun02.png" alt="">
                        <p>
                            <span>匹诺曹</span>
                            <i></i>
                            <em>河南 郑州</em>
                        </p>
                        <div class="concern">
                            + 关注
                        </div>
                    </li>
                    <li>
                        <img src="images/fun03.png" alt="">
                        <p>
                            <span>To love oneself</span>
                            <i></i>
                            <em>河南 郑州</em>
                        </p>
                        <div class="concern">
                            + 关注
                        </div>
                    </li>
                    <li>
                        <img src="images/fun04.png" alt="">
                        <p>
                            <span>匹诺曹</span>
                            <i></i>
                            <em>河南 郑州</em>
                        </p>
                        <div class="concern">
                            + 关注
                        </div>
                    </li>
                    <li>
                        <img src="images/fun05.png" alt="">
                        <p>
                            <span>匹诺曹</span>
                            <i></i>
                            <em>河南 郑州</em>
                        </p>
                        <div class="concern">
                            + 关注
                        </div>
                    </li>
                    <li>
                        <img src="images/fun06.png" alt="">
                        <p>
                            <span>匹诺曹</span>
                            <i></i>
                            <em>河南 郑州</em>
                        </p>
                        <div class="concern">
                            + 关注
                        </div>
                    </li>
                    <li>
                        <img src="images/fun07.png" alt="">
                        <p>
                            <span>匹诺曹</span>
                            <i></i>
                            <em>河南 郑州</em>
                        </p>
                        <div class="concern">
                            + 关注
                        </div>
                    </li>
                    <li>
                        <img src="images/fun07.png" alt="">
                        <p>
                            <span>匹诺曹</span>
                            <i></i>
                            <em>河南 郑州</em>
                        </p>
                        <div class="concern">
                            + 关注
                        </div>
                    </li>
                    <li>
                        <img src="images/fun07.png" alt="">
                        <p>
                            <span>匹诺曹</span>
                            <i></i>
                            <em>河南 郑州</em>
                        </p>
                        <div class="concern">
                            + 关注
                        </div>
                    </li>
                    <li>
                        <img src="images/fun07.png" alt="">
                        <p>
                            <span>匹诺曹</span>
                            <i></i>
                            <em>河南 郑州</em>
                        </p>
                        <div class="concern">
                            + 关注
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- nav  end  -->

    <!-- footer  start -->
    <footer>
        
    </footer>
    <!-- footer  end -->

<script src="js/zepto.min.js"></script>
<script src="js/swiper-3.4.0.min.js"></script>
<script type="text/javascript" src="js/iscroll-probe.js"></script>
<script src="js/add.js"></script>   
</body>
</html>